
<script type="text/html" data-template-name="change">
    <style>
        ol#node-input-rule-container .red-ui-typedInput-container {
            flex:1;
        }
    </style>
    <div class="form-row">
        <label for="node-input-name"><i class="fa fa-tag"></i> <span data-i18n="common.label.name"></span></label>
        <input type="text" id="node-input-name" style="width: calc(100% - 105px)"  data-i18n="[placeholder]common.label.name">
    </div>
    <div class="form-row" style="margin-bottom:0;">
        <label><i class="fa fa-list"></i> <span data-i18n="change.label.rules"></span></label>
    </div>
    <div class="form-row node-input-rule-container-row">
        <ol id="node-input-rule-container"></ol>
    </div>
</script>

<script type="text/javascript">
(function() {
    RED.nodes.registerType('change', {
        color: "#E2D96E",
        category: 'function',
        defaults: {
            name: {value:""},
            rules:{
                value:[{t:"set",p:"payload",pt:"msg",to:"",tot:"str"}],
                validate: function(rules, opt) {
                    let msg;
                    const errors = []
                    if (!rules || rules.length === 0) { return true }
                    for (var i=0;i<rules.length;i++) {
                        const opt = { label: RED._('node-red:change.label.rule')+' '+(i+1) }
                        const r = rules[i];
                        if (r.t === 'set' || r.t === 'change' || r.t === 'delete' || r.t === 'move') {
                            if ((msg = RED.utils.validateTypedProperty(r.p,r.pt,opt)) !== true) {
                                errors.push(msg)
                            }
                        }
                        if (r.t === 'set' || r.t === 'change' || r.t === 'move') {
                            if ((msg = RED.utils.validateTypedProperty(r.to,r.tot,opt)) !== true) {
                                errors.push(msg)
                            }
                        }
                        if (r.t === 'change') {
                            if ((msg = RED.utils.validateTypedProperty(r.from,r.fromt,opt)) !== true) {
                                errors.push(msg)
                            }
                        }
                    }
                    if (errors.length) {
                        return errors
                    }
                    return true;
                }
            },
            // legacy
            action: {value:""},
            property: {value:""},
            from: {value:""},
            to: {value:""},
            reg: {value:false}
        },
        inputs: 1,
        outputs: 1,
        icon: "swap.svg",
        label: function() {
            function prop2name(type, key) {
                var result = RED.utils.parseContextKey(key);
                return type +"." +result.key;
            }
            if (this.name) {
                return this.name;
            }
            if (!this.rules) {
                if (this.action === "replace") {
                    return this._("change.label.set",{property:"msg."+this.property});
                } else if (this.action === "change") {
                    return this._("change.label.change",{property:"msg."+this.property});
                } else if (this.action === "move") {
                    return this._("change.label.move",{property:"msg."+this.property});
                } else {
                    return this._("change.label.delete",{property:"msg."+this.property});
                }
            } else {
                if (this.rules.length == 1) {
                    if (this.rules[0].t === "set") {
                        return this._("change.label.set",{property:prop2name((this.rules[0].pt||"msg"), this.rules[0].p)});
                    } else if (this.rules[0].t === "change") {
                        return this._("change.label.change",{property:prop2name((this.rules[0].pt||"msg"), this.rules[0].p)});
                    } else if (this.rules[0].t === "move") {
                        return this._("change.label.move",{property:prop2name((this.rules[0].pt||"msg"), this.rules[0].p)});
                    } else {
                        return this._("change.label.delete",{property:prop2name((this.rules[0].pt||"msg"), this.rules[0].p)});
                    }
                } else {
                    return this._("change.label.changeCount",{count:this.rules.length});
                }
            }
        },
        labelStyle: function() {
            return this.name ? "node_label_italic" : "";
        },
        oneditprepare: function() {
            var set = this._("change.action.set");
            var change = this._("change.action.change");
            var del = this._("change.action.delete");
            var move = this._("change.action.move");
            var to = this._("change.action.to");
            var toValueLabel = this._("change.action.toValue",to);
            var search = this._("change.action.search");
            var replace = this._("change.action.replace");
            var regex = this._("change.label.regex");
            var deepCopyLabel = this._("change.label.deepCopy");

            function createPropertyValue(row2_1, row2_2, defaultType) {
                var propValInput = $('<input/>',{class:"node-input-rule-property-value",type:"text"})
                    .appendTo(row2_1)
                    .typedInput({default:defaultType||'str',types:['msg','flow','global','str','num','bool','json','bin','date','jsonata','env']});

                var dcLabel = $('<label style="padding-left: 130px;"></label>').appendTo(row2_2);
                var deepCopy = $('<input type="checkbox" class="node-input-rule-property-deepCopy" style="width: auto; margin: 0 6px 0 0">').appendTo(dcLabel)
                $('<span>').text(deepCopyLabel).appendTo(dcLabel)

                propValInput.on("change", function(evt,type,val) {
                    row2_2.toggle(type === "msg" || type === "flow" || type === "global" || type === "env");
                })
                return [propValInput, deepCopy];
            }
            function createFromValue(row3_1, defaultType) {
                return $('<input/>',{class:"node-input-rule-property-search-value",type:"text"})
                .appendTo(row3_1)
                .typedInput({default:defaultType||'str',types:['msg','flow','global','str','re','num','bool','env']});
            }
            function createToValue(row3_2, defaultType) {
                return $('<input/>',{class:"node-input-rule-property-replace-value",type:"text"})
                .appendTo(row3_2)
                .typedInput({default:defaultType||'str',types:['msg','flow','global','str','num','bool','json','bin','env']});
            }
            function createMoveValue(row4, defaultType) {
                return $('<input/>',{class:"node-input-rule-property-move-value",type:"text"})
                .appendTo(row4)
                .typedInput({default:defaultType||'msg',types:['msg','flow','global']});
            }

            $('#node-input-rule-container').css('min-height','150px').css('min-width','450px').editableList({
                addItem: function(container,i,opt) {
                    var rule = opt;
                    if (!rule.hasOwnProperty('t')) {
                        rule = {t:"set",p:"payload",to:"",tot:"str"};
                    }
                    if (rule.t === "change" && rule.re) {
                        rule.fromt = 're';
                        delete rule.re;
                    }
                    if (rule.t === "set" && !rule.tot) {
                        if (rule.to.indexOf("msg.") === 0 && !rule.tot) {
                            rule.to = rule.to.substring(4);
                            rule.tot = "msg";
                        } else {
                            rule.tot = "str";
                        }
                    }
                    if (rule.t === "move" && !rule.tot) {
                        rule.tot = "msg";
                    }
                    container.css({
                        overflow: 'hidden',
                        whiteSpace: 'nowrap'
                    });
                    let fragment = document.createDocumentFragment();
                    var row1 = $('<div/>',{style:"display:flex; align-items: baseline"}).appendTo(fragment);
                    var row2 = $('<div/>',{style:"margin-top:8px;"}).appendTo(fragment);
                    var row3 = $('<div/>',{style:"margin-top:8px;"}).appendTo(fragment);
                    var row4 = $('<div/>',{style:"display:flex;margin-top:8px;align-items: baseline"}).appendTo(fragment);

                    var selectField = $('<select/>',{class:"node-input-rule-type",style:"width:110px; margin-right:10px;"}).appendTo(row1);
                    var selectOptions = [{v:"set",l:set},{v:"change",l:change},{v:"delete",l:del},{v:"move",l:move}];
                    for (var i=0; i<4; i++) {
                        selectField.append($("<option></option>").val(selectOptions[i].v).text(selectOptions[i].l));
                    }

                    var propertyName = $('<input/>',{class:"node-input-rule-property-name",type:"text"})
                        .appendTo(row1)
                        .typedInput({types:['msg','flow','global']});

                    var row2_1 = $('<div/>', {style:"display:flex;align-items: baseline"}).appendTo(row2);
                    $('<div/>',{style:"display:inline-block;text-align:right; width:120px; padding-right:10px; box-sizing:border-box;"})
                        .text(toValueLabel)
                        .appendTo(row2_1);

                    var row2_2 = $('<div/>', {style:"margin-top: 4px;"}).appendTo(row2);

                    var row3_1 = $('<div/>', {style:"display:flex;align-items: baseline"}).appendTo(row3);
                    $('<div/>',{style:"display:inline-block;text-align:right; width:120px; padding-right:10px; box-sizing:border-box;"})
                        .text(search)
                        .appendTo(row3_1);

                    var row3_2 = $('<div/>',{style:"display:flex;margin-top:8px;align-items: baseline"}).appendTo(row3);
                    $('<div/>',{style:"display:inline-block;text-align:right; width:120px; padding-right:10px; box-sizing:border-box;"})
                        .text(replace)
                        .appendTo(row3_2);

                    $('<div/>',{style:"display:inline-block;text-align:right; width:120px; padding-right:10px; box-sizing:border-box;"})
                        .text(to)
                        .appendTo(row4);

                    let propertyValue = null;
                    let fromValue = null;
                    let toValue = null;
                    let moveValue = null;

                    selectField.on("change", function() {
                        var type = $(this).val();
                        if (propertyValue) {
                            propertyValue.typedInput('hide');
                        }
                        if (fromValue) {
                            fromValue.typedInput('hide');
                        }
                        if (toValue) {
                            toValue.typedInput('hide');
                        }
                        if (moveValue) {
                            moveValue.typedInput('hide');
                        }

                        if (type == "set") {
                            if(!propertyValue) {
                                var parts = createPropertyValue(row2_1, row2_2);
                                propertyValue = parts[0];
                                deepCopy = parts[1];
                            }
                            propertyValue.typedInput('show');
                            row2.show();
                            row3.hide();
                            row4.hide();
                        } else if (type == "change") {
                            if(!fromValue) {
                                fromValue = createFromValue(row3_1);
                            }
                            fromValue.typedInput('show');
                            if(!toValue) {
                                toValue = createToValue(row3_2);
                            }
                            toValue.typedInput('show');
                            row2.hide();
                            row3.show();
                            row4.hide();
                        } else if (type == "delete") {
                            row2.hide();
                            row3.hide();
                            row4.hide();
                        } else if (type == "move") {
                            if(!moveValue) {
                                moveValue = createMoveValue(row4);
                            }
                            moveValue.typedInput('show');
                            row2.hide();
                            row3.hide();
                            row4.show();
                        }
                    });

                    selectField.val(rule.t);
                    propertyName.typedInput('value',rule.p);
                    propertyName.typedInput('type',rule.pt);
                    if (rule.t == "set") {
                        var parts = createPropertyValue(row2_1, row2_2, rule.tot);
                        propertyValue = parts[0];
                        deepCopy = parts[1];
                        propertyValue.typedInput('value',rule.to);
                        deepCopy.prop("checked", !!rule.dc);
                    }
                    if (rule.t == "move") {
                        moveValue = createMoveValue(row4,rule.tot);
                        moveValue.typedInput('value',rule.to);
                    }
                    if (rule.t == "change") {
                        fromValue = createFromValue(row3_1, rule.fromt);
                        fromValue.typedInput('value',rule.from);

                        toValue = createToValue(row3_2,rule.tot);
                        toValue.typedInput('value',rule.to);
                    }
                    selectField.change();
                    container[0].appendChild(fragment);
                },
                removable: true,
                sortable: true
            });

            if (!this.rules) {
                var rule = {
                    t:(this.action=="replace"?"set":this.action),
                    p:this.property,
                    pt:"msg"
                };

                if ((rule.t === "set")||(rule.t === "move")) {
                    rule.to = this.to;
                } else if (rule.t === "change") {
                    rule.from = this.from;
                    rule.to = this.to;
                    rule.re = this.reg;
                }

                delete this.to;
                delete this.from;
                delete this.reg;
                delete this.action;
                delete this.property;

                this.rules = [rule];
            }

            for (var i=0; i<this.rules.length; i++) {
                var rule = this.rules[i];
                $("#node-input-rule-container").editableList('addItem',rule);
            }
        },
        oneditsave: function() {
            var rules = $("#node-input-rule-container").editableList('items');
            var node = this;
            node.rules= [];
            rules.each(function(i) {
                var rule = $(this);
                var type = rule.find(".node-input-rule-type").val();
                var r = {
                    t:type,
                    p:rule.find(".node-input-rule-property-name").typedInput('value'),
                    pt:rule.find(".node-input-rule-property-name").typedInput('type')
                };
                if (type === "set") {
                    r.to = rule.find(".node-input-rule-property-value").typedInput('value');
                    r.tot = rule.find(".node-input-rule-property-value").typedInput('type');
                    if (rule.find(".node-input-rule-property-deepCopy").prop("checked")) {
                        r.dc = true;
                    }
                } else if (type === "move") {
                    r.to = rule.find(".node-input-rule-property-move-value").typedInput('value');
                    r.tot = rule.find(".node-input-rule-property-move-value").typedInput('type');
                } else if (type === "change") {
                    r.from = rule.find(".node-input-rule-property-search-value").typedInput('value');
                    r.fromt = rule.find(".node-input-rule-property-search-value").typedInput('type');
                    r.to = rule.find(".node-input-rule-property-replace-value").typedInput('value');
                    r.tot = rule.find(".node-input-rule-property-replace-value").typedInput('type');
                }
                node.rules.push(r);
            });
        },
        oneditresize: function(size) {
            var rows = $("#dialog-form>div:not(.node-input-rule-container-row)");
            var height = size.height;
            for (var i=0; i<rows.length; i++) {
                height -= $(rows[i]).outerHeight(true);
            }
            var editorRow = $("#dialog-form>div.node-input-rule-container-row");
            height -= (parseInt(editorRow.css("marginTop"))+parseInt(editorRow.css("marginBottom")));
            height += 16;
            $("#node-input-rule-container").editableList('height',height);
        }
    });
})();
</script>
